﻿(function ($) {
    $.widget('ui.mapAreaGenerator',
        {
            options: {
                areas: [],
                areaHeight: null,
                areaWidth: null,
                ranges: []
            },

            _create: function () {
                this._initialize();
                if (!this.options.areas) return;
                var name = 'map_' + $(document).find('map').length;
                var html = '<map name="{name}">'.replace('{name}', name);
                for (var i = 0; i < this.options.areas.length; i++) {
                    var area = this.options.areas[i];
                    html += '<area coords="{coords}" href="javascript:" shape="{shape}" />'
                        .replace('{coords}', area.coords)
                        .replace('{shape}', area.shape ? area.shape : 'rect');
                }
                html += '</map>';
                this.element.attr('usemap', '#' + name);
                this.element.parent().append(html);
            },
            _getAreas: function (x0, y0, x1, y1, areaWidth, areaHeight, areaBorder) {
                if (!areaHeight) areaHeight = y1 - y0;
                if (!areaWidth) areaWidth = x1 - x0;
                if (!areaBorder) areaBorder = 0;
                var result = [];
                var x = x0;
                while (x <= (x1 - areaWidth)) {
                    x += areaBorder;
                    var y = y0;
                    while (y <= (y1 - areaHeight)) {
                        y += areaBorder;
                        result.push({
                            coords: x + ',' + y + ',' + (x + areaWidth) + ',' + (y + areaHeight)
                        });
                        y += areaHeight + areaBorder;
                    }
                    x += areaWidth + areaBorder;
                }
                return result;
            },
            _initialize: function () {
                if (!this.options.areaHeight && !this.options.areaWidth) return;
                if (this.options.ranges && (this.options.ranges.length > 0)) {
                    for (var i = 0; i < this.options.ranges.length; i++) {
                        var coords = this.options.ranges[i].coords.split(',');
                        var areas = this._getAreas(
                            parseInt(coords[0]),
                            parseInt(coords[1]),
                            parseInt(coords[2]),
                            parseInt(coords[3]),
                            this.options.areaWidth,
                            this.options.areaHeight,
                            this.options.areaBorder);
                        this.options.areas = this.options.areas.concat(areas);
                    }
                } else {
                    if (!this.options.areas || (this.options.areas.length == 0)) {
                        this.options.areas = this._getAreas(
                            0,
                            0,
                            this.element.width(),
                            this.element.height(),
                            this.options.areaWidth,
                            this.options.areaHeight,
                            this.options.areaBorder);
                    }
                }
            },

            destroy: function () {
                $.Widget.prototype.destroy.call(this);
            }
        });
})(jQuery);